<template>
  <div class="container">
    <el-card style="margin: 10px">
      <h3>{{ title }}</h3>
      <hr />
      <el-form
        :model="fromData"
        :rules="rules"
        ref="fromDate"
        label-width="100px"
      >
        <el-form-item label="学科" prop="subjectID">
          <el-select
            v-model="fromData.subjectID"
            placeholder="请选择"
            style="width: 390px"
          >
            <el-option
              v-for="(item, index) in subjectID"
              :key="index"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录" prop="catalogID">
          <el-select
            v-model="fromData.catalogID"
            placeholder="请选择"
            style="width: 390px"
          >
            <el-option
              v-for="(item, index) in catalogID"
              :key="index"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业" prop="enterpriseID">
          <el-select
            v-model="fromData.enterpriseID"
            placeholder="请选择"
            style="width: 390px"
          >
            <el-option
              v-for="item in enterpriseID"
              :key="item.id"
              :value="item.id"
              :label="item.shortName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市" prop="province">
          <el-select
            v-model="fromData.province"
            placeholder="请选择"
            style="width: 195px"
            @change="this.getcity"
          >
            <el-option
              v-for="(item, index) in province"
              :key="index"
              :value="item"
              :label="item"
            ></el-option>
          </el-select>
          <el-select
            v-model="fromData.city"
            placeholder="请选择"
            style="width: 195px"
          >
            <el-option
              v-for="(item, index) in city"
              :key="index"
              :value="item"
              :label="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向" prop="direction">
          <el-select
            v-model="fromData.direction"
            placeholder="请选择"
            style="width: 390px"
          >
            <el-option
              v-for="(item, index) in direction"
              :key="index"
              :value="item"
              :label="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型:">
          <el-radio-group v-model="fromData.questionType">
            <el-radio label="danxuan">单选</el-radio>
            <el-radio label="duoxuan">多选</el-radio>
            <el-radio label="jianda">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度:">
          <el-radio-group v-model="fromData.difficulty">
            <el-radio label="jiandan">简单</el-radio>
            <el-radio label="yiban">一般</el-radio>
            <el-radio label="kunnan">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题干:" prop="question">
          <el-row style="height: 240px">
            <quill-editor
              ref="text"
              v-model="fromData.question"
              class="myQuillEditor"
              :options="editorOption"
              style="height: 150px"
            />
          </el-row>
        </el-form-item>
        <!-- 放置上传答案插件 -->
        <el-form-item
          v-if="fromData.questionType != 'jianda'"
          label="选项："
          class="ONED"
        >
          <xuanXiang
            :options="numberOne"
            :inputFn="fromData.questionType"
            :optionsData="fromData.options"
          ></xuanXiang>
          <el-button type="danger" @click="numberOne++">点击新增选项</el-button>
        </el-form-item>
        <el-form-item label="解析视频:" prop="videoURL">
          <el-input
            v-model="fromData.videoURL"
            class="marginOne"
            style="width: 400px"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="答案:" prop="answer">
          <el-row style="height: 240px">
            <quill-editor
              ref="text"
              v-model="fromData.answer"
              class="myQuillEditor"
              :options="editorOption"
              style="height: 150px"
            />
          </el-row>
        </el-form-item>
        <el-form-item label="题目备注:" prop="remarks">
          <el-input
            type="textarea"
            v-model="fromData.remarks"
            style="width: 400px"
            :rows="5"
          ></el-input>
        </el-form-item>
        <el-form-item label="试题标签：" prop="tags">
          <el-select
            v-model="fromData.tags"
            placeholder="请选择"
            style="width: 390px"
            multiple
          >
            <el-option
              v-for="(item, index) in tags"
              :key="index"
              :value="item.label"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-row style="margin-left: 100px">
          <el-button type="primary" @click="handle">确认提交</el-button>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import xuanXiang from '../components/xuanxiang.vue'
import { quillEditor } from 'vue-quill-editor' // 引入富文本编辑器插件
import 'quill/dist/quill.core.css' // 引入相关样式
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { simple } from '../../api/hmmm/subjects' // 学科列表API
import { simple as simple1 } from '../../api/hmmm/directorys' // 目录接口
import { list } from '../../api/hmmm/companys' // 企业接口
import { provinces, citys } from '../../api/hmmm/citys' // 城市接口
import { direction } from '../../api/hmmm/constants'
import { simple as simple2 } from '../../api/hmmm/tags'
import { add, detailNXC, update } from '../../api/hmmm/questions'
export default {
  components: {
    xuanXiang,
    quillEditor
  },
  data () {
    return {
      title: '添加试题', // 标题
      useID: this.$route.query.id,
      numberOne: 4,
      editorOption: {},
      subjectID: [], // 学科列表
      catalogID: [], // 目录列表
      enterpriseID: [], // 企业列表
      province: [], // 城市列表
      city: [], // 小城市
      direction, // 方向列表
      xuanxiang: [], // 选项
      tags: [], // 试题标签
      fromData: {
        subjectID: '', // 学科列表
        catalogID: '', // 目录列表
        enterpriseID: '', // 企业列表!INT
        province: '', // 城市列表
        city: '', // 小城市
        direction: '', // 方向列表
        questionType: 'danxuan', // 题型!STRING
        difficulty: 'jiandan', // 难度!STRING
        question: '', // 题干
        answer: '', // 答案
        videoURL: '',
        remarks: '',
        tags: '',
        options: [{
          code: 'A', // 选项
          title: '', // 标题
          imgObj: {},
          img: '', // 图片
          isRight: true // 正确答案
        },
        {
          code: 'B', // 选项
          title: '', // 标题
          imgObj: {},
          img: '', // 图片
          isRight: true // 正确答案
        },
        {
          code: 'C', // 选项
          title: '', // 标题
          imgObj: {},
          img: '', // 图片
          isRight: true // 正确答案
        },
        {
          code: 'D', // 选项
          title: '', // 标题
          imgObj: {},
          img: '', // 图片
          isRight: true // 正确答案
        }]
      },
      rules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'change' }],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'change' }],
        enterpriseID: [{ required: true, message: '请选择企业', trigger: 'change' }],
        province: [{
          required: true,
          validator: (rules, value, cb) => {
            const { city } = this.fromData
            if (!value || !city) {
              return cb(new Error('请选择城市'))
            }
            return cb()
          },
          trigger: 'change'
        }],
        direction: [{ required: true, message: '内容不能为空', trigger: 'change' }],
        question: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
        answer: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
        videoURL: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
        remarks: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
        tags: [{ required: true, message: '内容不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {
    // sunads: 120 * this.numberOne
  },
  created () {
    this.getsubjectID()
    this.getcatalogID()
    this.getenterpriseID()
    this.getprovince()
    this.getcity()
    this.getsimple2()
    this.changeBank()
    // console.log(direction)
  },
  methods: {
    changeBank () {
      // 判断是否是修改，是数据回填
      if (this.useID) {
        this.title = '修改试题'
        detailNXC(this.useID).then(res => {
          this.fromData = res.data
          this.fromData.options = []
          this.fromData.options = res.data.options
          this.fromData.tags = this.fromData.tags.split(',')
          this.fromData.tags.map((item) => Number(item))
          console.log(this.fromData.tags, this.fromData.options, res.data.options)
        })
      }
    },
    async getsubjectID () {
      const { data } = await simple()
      this.subjectID = data
    },
    async getcatalogID () {
      const { data } = await simple1()
      this.catalogID = data
    },
    async getenterpriseID () {
      const { data } = await list()
      this.enterpriseID = data.items
    },
    getprovince () {
      this.province = provinces()
    },
    getcity (value) {
      // 1：给父选择框绑定一个change事件
      this.fromData.city = ''
      this.city = citys(value)
    },
    async getsimple2 () {
      const { data } = await simple2()
      this.tags = data
      // console.log(data)
    },
    // from 表单验证
    handle () {
      this.$refs.fromDate.validate(isOk => {
        if (isOk) {
          if (this.useID) {
            // 修改试题
            this.fromData.options[0].img = this.fromData.options[0].imgObj.url
            update({ ...this.fromData, id: this.useID * 1, tags: this.fromData.tags.join(',') }).then(() => {
              this.$router.push('/questions/list')
              this.$message.success('修改成功')
            }).catch((err) => { console.log(err) })
          } else {
            // 添加试题
            this.fromData.options[0].img = this.fromData.options[0].imgObj.url
            add({ ...this.fromData, tags: this.fromData.tags.join(',') }).then(() => {
              this.$router.push('/questions/list')
              this.$message.success('添加成功')
            })
          }
        }
      })
    }

  }
}
</script>

<style scoped lang='scss'>
.fromzheng {
  width: 1390px;
  .fromyan {
    width: 400px;
  }
}
.ONED {
  width: 100%;
}
</style>
